<template>
  <div class="pie">
    <div class="pie_all">
      <div id="allEchart" :style="{width: '100%', height: '100%'}"></div>
      <div class="noReason" v-if="HFData[0].item.length == 0">无错误</div>
    </div>
    <div class="pie_items">
      <div class="item" v-for="(val,index) in HFData" :key="index" v-if="val.id != 999">
        <div class="itemCanvas" :id="'itemEchart' + val.id" :style="{width: '100%', height: '100%'}"></div>
        <div class="noReason" v-if="val.item.length == 0">无错误</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['HFData'],
    name: "allPoint",
    data() {
      return {
        phoneStyle: false,
      }
    },
    watch: {
      HFData(val) {
        let self = this
        for (let i = 0;i < self.HFData.length; i++) {
          if (self.HFData[i].id == 999) {
            self.getPie('allEchart',i)
          } else {
            self.getPie('itemEchart' + self.HFData[i].id,i)
          }
        }
      }
    },
    created() {
      let self = this
      let dw = document.body.clientWidth
      if (dw < 820) {
        self.phoneStyle = true
        self.size = 12
        self.page = 1
      } else {
        self.size = 2
        self.page = 1
        self.phoneStyle = false
      }
    },
    mounted() {
      let self = this
      for (let i = 0;i < self.HFData.length; i++) {
        if (self.HFData[i].id == 999) {
          self.getPie('allEchart',i)
        } else {
          self.getPie('itemEchart' + self.HFData[i].id,i)
        }
      }
    },
    methods: {
      getPie(id,index) {
        let self = this
        let dataList = []
        for (let i = 0; i < self.HFData[index].item.length; i++){
          dataList.push({
            value: self.HFData[index].item[i].num,
            name: self.HFData[index].item[i].name
          })
        }
        let allEchart = self.$echarts.init(document.getElementById(id))
        allEchart.setOption({
          title : {
            text: self.HFData[index].name,
            x:'center',
            y: '10%',
          },
          legend: {
            show:false,
          },
          series : [
            {
              name: self.HFData[index].name,
              type: 'pie',
              radius : ['18%', '45%'],
              center: ['50%', '50%'],
              labelLine:{
                normal:{
                  length: 1
                }
              },
              data: dataList,
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        });
      },
    }
  }
</script>

<style lang="less" scoped>
  .pie{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-top: none;
    .pie_all{
      width: 40%;
      height: 500px;
      border-right: 1px solid #e5e5e5;
      border-bottom: 1px solid #e5e5e5;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background: #fff;
      position: relative;
      .noReason{
        width: 100%;
        font-size: 20px;
        color: #333;
        position: absolute;
        top: 50%;
        text-align: center;
      }
    }
    .pie_items{
      width: 60%;
      height: 500px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      .item{
        width: 50%;
        height: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
        background: #fff;
        .itemCanvas{
          margin: auto;
        }
        .noReason{
          width: 100%;
          font-size: 20px;
          color: #333;
          position: absolute;
          top: 50%;
          text-align: center;
        }
      }
      .item:nth-child(odd){
        border-right: 1px solid #e5e5e5;
        border-bottom: 1px solid #e5e5e5;
      }
      .item:nth-child(even){
        border-bottom: 1px solid #e5e5e5;
      }
    }
  }
  /* 手机竖屏 */
  @media screen and (min-width: 0px) and (max-width: 820px) {
    .pie{
      padding-bottom: 66px;
      margin-top: 52px;
      display: flex;
      flex-direction: column;
      .pie_all{
        width: 100%;
      }
      .pie_items{
        width: 100%;
      }
    }
  }
</style>